<template>
  <div class="commit">
    <!-- 提交评论 -->
    <div class="hd">
      <h3>提交评论</h3>
      <p @click="$router.go(-1)">返回</p>
    </div>
    <!-- 发表 -->
    <div class="publish">
      <textarea
        name=""
        placeholder="请输入评论内容..."
        v-model.trim="content"
      ></textarea>
      <van-button type="info" block @click="publish">发表</van-button>
    </div>
    <div class="list">
      <div class="list-hd">
        <h3>评论列表</h3>
        <span>{{ total }}条评论</span>
      </div>
      <van-list :finished="finished" finished-text="没有更多了">
        <div class="list-bd">
          <div class="list-bd-item" v-for="(item, i) in commentlist" :key="i">
            <p>{{ item.content }}</p>
            <div class="uname">
              <p>{{ item.user_name }}</p>
              <span>{{ item.add_time | fromdata }}</span>
            </div>
          </div>
        </div>
      </van-list>
      <van-button type="danger" block plain @click="more">{{
        finished ? "没有更多了" : "加载更多"
      }}</van-button>
    </div>
  </div>
</template>

<script>
import { getcomments, postcomment } from "../api/coment";
export default {
  data() {
    return {
      commentlist: [], //评论列表
      total: 0, //评论总条数
      loading: false,
      finished: false,
      pageindex: 1,
      content: "", //文本内容
    };
  },
  mounted() {
    this.getcommentlist();
  },
  methods: {
    async getcommentlist() {
      const { data: res } = await getcomments(this.$route.params.id, {
        pageindex: this.pageindex,
      });

      // console.log(res);

      this.total = res.total;
      // 如果没有评论则设为true
      if (!res.message.length) {
        return (this.finished = true);
      }
      // 把最新的数据最佳
      this.commentlist.push(...res.message);
      //   console.log(this.commentlist);
    },
    // 追加评论
    async publish() {
      if (this.content.trim() == "") {
        return this.$notify("输入内容不能为空");
      }
      //   console.log(this.content);
      //   const content = this.content;
      //   console.log(this.$route.params.id);
      let { data: res } = await postcomment(
        this.$route.params.id,
        `content=${this.content}`
      );

      console.log(res, "res");
      this.commentlist = [];
      this.pageindex = 1;
      this.getcommentlist();
      this.content = "";
    },

    more() {
      this.pageindex++;

      this.getcommentlist();
    },
  },
};
</script>

<style lang="less" scoped>
.commit {
  .hd {
    padding: 20px 40px 10px 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    h3 {
      font-size: 22px;
      font-weight: 700;
    }

    p {
      padding-right: 20px;
      color: #007aff;
    }
  }

  .publish {
    padding: 10px;
    textarea {
      padding: 5px 10px;
      width: 95%;
      height: 100px;
      border: 0;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .van-button {
      margin: 10px 0;
    }
  }

  .list {
    .list-hd {
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 10px 40px 10px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3 {
        font-size: 22px;
        font-weight: 700;
      }

      span {
        font-size: 12px;
        color: #999;
      }
    }

    .list-bd {
      .list-bd-item {
        border-bottom: 1px solid #ccc;
        padding: 10px 30px 10px 10px;
        font-size: 12px;
        color: #999;

        .uname {
          display: flex;
          padding: 10px 0 0;
          justify-content: space-between;
          p {
            color: #007aff;
          }
        }
      }
    }
  }
}
</style>
